<template>
	<view class="">
		<view class="p-f w100 yetbg" :style="{background:tColor}"></view>
		<view class="p03 posi-r spgl">
			<!-- <view class="bf bs30 spgl1 f-row">
				<view v-for="(v,i) in topdata" :key='i' class="f-1 f-c-c">
					<text class="iconfont cf70 f60 mb30" :class="'icon'+v.i"></text>
					<view class="f24 c9">{{v.name}}</view>
					<view class="f32">{{v.num}}</view>
				</view>
			</view> -->
			<view class="bf bs30 f-raw">
				<view v-if="!v.hide" @click="djgl(v)" hover-class="be" v-for="(v,i) in spgl" :key='i'
					class="w50 spgl2i f-c hlb hlr">
					<text class="iconfont cf70 f44 mr20" :class="'icon'+v.i" :style="{color:v.c}"></text>
					<view>{{v.n}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		utilMixins,
	} from "@/common/util-mixins.js"
	import mgCell from '@/components/common/mg-cell.vue'
	import mgInput from '@/components/form/mg-input.vue'
	import wPicker from "@/components/form/w-picker.vue"
	import utils from '@/common/utils.js'
	export default {
		name: 'order-index',
		components: {
			mgCell,
			mgInput,
			wPicker,
		},
		data() {
			return {
				spgl:[],
				sdata: {
					ktxje: 0,
					drzje: 0,
					ytxje: 0,
				},
			}
		},
		async onLoad(options) {
			this.query = options
			this.getSystem({
				setNB: 1
			})
			this.util.setNT('商品管理')
			this.getSpgl()
		},
		async onShow() {
			// this.util.request({
			// 	'url': this.api.GoodsData,
			// }).then((res) => {
			// 	this.sdata = res.data
			// })
		},
		mixins: [utilMixins],
		computed: {
			topdata() {
				return [{
					name: '出售中',
					i: 'csz',
					num: this.sdata.upperShelf
				}, {
					name: '仓库中',
					i: 'ckz',
					num: this.sdata.lowerShelf
				}, {
					name: '已销售',
					i: 'ysq',
					num: this.sdata.salesNum
				}, ]
			},
			
		},
		methods: {
			getSpgl() {
				this.spgl =  [{
					hide: this.islsb,
					i: 'fb',
					c: '#95CA4E',
					n: '发布商品',
					url: 'fbsp?type=' + this.query.type
				}, {
					i: 'spgl',
					c: '#4BAADF',
					n: '商品管理',
					url: 'spgl?t=1'
				}, {
					hide: this.islsb,
					i: 'gggl',
					c: '#FAC923',
					n: '商品规格',
					url: 'ggsz'
				}, {
					hide: this.islsb,
					i: 'fl',
					c: '#FF784D',
					n: '商品属性',
					url: 'sxsz'
				}, {
					hide: this.islsb,
					i: 'jl',
					c: '#23FABB',
					n: '商品加料',
					url: 'jlsz'
				}, {
					hide: this.islsb,
					i: 'spdw',
					c: '#A59989',
					n: '商品单位',
					url: 'dwsz'
				}, {
					hide: this.islsb,
					i: 'pl',
					c: '#FF784D',
					n: '商品标签',
					url: 'spbqsz'
				}, {
					hide: this.islsb,
					i: 'dyj',
					c: '#4BAADF',
					n: '打印标签',
					url: 'dybqsz'
				}]
			},
			djgl(v) {
				if (v.i == 'spgl') {
					return this.go({
						t: 4
					})
				}
				this.go({
					url: v.url
				})
			},
		},
	}
</script>
<style scoped lang="scss">
	.yetbg {
		height: 200rpx;
	}

	.spgl {
		padding-top: 90rpx;
	}

	.spgl1 {
		padding: 50rpx 0;
	}

	.spgl2i {
		height: 137rpx;

		&:nth-child(2n)::after {
			border-right: none;
		}
	}
</style>
